<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="学科：" prop="subject" required>
        <el-select v-model="form.subject" :placeholder="form.subject_name" clearable>
          <el-option v-for="item in subjects" :key="item.id" :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题干：" prop="theme" required>
        <el-input v-model="form.theme" @focus="inputClick(form,'theme')"/>
      </el-form-item>
      <el-form-item label="答案：" prop="right_answer" required>
        <el-input v-model="form.right_answer" @focus="inputClick(form,'right_answer')"/>
      </el-form-item>
      <el-form-item label="分数：" prop="title_score" required>
        <el-input-number v-model="form.title_score" :precision="1" :step="1" :max="100" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="showQuestion">预览</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="richEditor.dialogVisible" append-to-body :close-on-click-modal="false"
               style="width: 100%;height: 100%" :show-close="false" center>
      <Ueditor @ready="editorReady"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editorConfirm">确 定</el-button>
        <el-button @click="richEditor.dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="clearRichEditor">清空</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%">
      <ShowTitle :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading"/>
    </el-dialog>
  </div>
</template>

<script>
import ShowTitle from "../../components/ShowTitle";
import Ueditor from '@/components/Ueditor'

export default {
  name: 'ShortAnswer',
  components: {
    Ueditor, ShowTitle
  },
  data() {
    return {
      form: {
        id: null,
        title_type: 3,
        subject: null,
        theme: '',
        right_answer: '',
        title_score: '',
        options: [],
        type_name: '',
      },
      subjects: [],
      formLoading: false,
      rules: {
        subject: [
          {required: true, message: '请选择学科', trigger: 'change'}
        ],
        theme: [
          {required: true, message: '请输入题干', trigger: 'blur'}
        ],
        right_answer: [
          {required: true, message: '请输入答案', trigger: 'blur'}
        ],
        title_score: [
          {required: true, message: '请输入分数', trigger: 'blur'}
        ]
      },
      richEditor: {
        dialogVisible: false,
        object: null,
        parameterName: '',
        instance: null
      },
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      }
    }
  },
  created() {
    this.getSubjects()
    let id = this.$route.query.id
    if (id) {
      this.getTitle(id)
    }
  },
  methods: {
    getTitle(id) {
      this.$http({
        url: this.$settings.BASE_URL + `/paper/title_list/${id}/`,
        method: 'get',
      }).then(res => {
        if (res.data.code === 20000) {
          this.form = res.data.result
          this.form.options = []
        }
      })
    },
    getSubjects() {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/subject_list/',
        method: 'get',
      }).then(res => {
        if (res.data.code === 20000) {
          this.subjects = res.data.result.results
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 3000,
          })
        }
      })
    },
    editorReady(instance) {
      this.richEditor.instance = instance
      let currentContent = this.richEditor.object[this.richEditor.parameterName]
      this.richEditor.instance.setContent(currentContent)
      // 光标定位到Ueditor
      this.richEditor.instance.focus(true)
    },
    inputClick(object, parameterName) {
      this.richEditor.object = object
      this.richEditor.parameterName = parameterName
      this.richEditor.dialogVisible = true
    },
    editorConfirm() {
      let content = this.richEditor.instance.getContent()
      this.richEditor.object[this.richEditor.parameterName] = content
      this.richEditor.dialogVisible = false
    },
    clearRichEditor() {
      this.richEditor.instance.setContent('');
    },
    submitForm() {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/title_list/',
        method: 'post',
        data: this.form,
      }).then(res => {
        if (res.data.code === 20000) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 3000,
          })
          this.resetForm()
        } else {
          this.$message({
            type: 'error',
            message: '提交失败',
            duration: 3000,
          })
        }
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.form = {
        id: null,
        title_type: 3,
        subject: null,
        theme: '',
        right_answer: '',
        title_score: '',
        options: [],
      }
    },
    showQuestion() {
      this.questionShow.dialog = true
      this.questionShow.qType = this.form.title_type
      this.questionShow.question = this.form
    },
  },
}
</script>
